<template>
  <div b="1px solid #ffffff80" b-rd-1 p2>
    <div flex items-baseline v-for="(member, index) in type.members">
      <div mr2>{{ member.name }}</div>
      <VarInput v-model:varlike="varLikes[index]" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { VarInit } from "~/models/data/var_init";
import type { InterfaceType } from '~/models/types/interface_type';

const props = defineProps<{
  type: InterfaceType,
  modelValue: any,
}>()
defineEmits<{
  (e: 'update:modelValue', event: InterfaceType): void,
}>()

const varLikes = ref([] as VarInit[])

watch(() => props.type, () => {
  varLikes.value = props.type.members.map(member => {
    return new VarInit(member.name, member.type, props.modelValue[member.name])
  })
}, {
  immediate: true,
})

watch(varLikes, (newList) => {
  newList.forEach(v => {
    props.modelValue[v.name] = v.initial
  })
}, {
  deep: true
})

</script>

<style lang="scss">
.var-input-bool {
  .el-checkbox__input {
    background: #fff;
    overflow: hidden;
    border-radius: 2px;
  }
}
</style>